import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
  //提供唯一公共数据源，所有共享的数据都要统一放在Store的state中进行存储
  state: {
    count: 0
  },

  //只有mutation 中定义的函数才能修改state中的数据
  mutations: {
    add(state) {
      //变更状态(自增)

      //mutations 函数中不能使用异步函数
      // setTimeout(()=>{
      //   state.count++
      // },1000)
      state.count++
    },
    /**
     *
     * @param {*} state 仓库数据
     * @param {*} step  传递的参数
     */
    addN(state, step) {
      state.count += step
    },
    reduc(state) {
      //变更状态(自减)
      state.count--
    },
    reducN(state, step) {
      //变更状态(接受参数)
      state.count -= step
    }
  },
 /**
  * 在actions中 不能直接修改state 中的数据 
  * 必须通过 context.commit() 触发某个mutation 中的函数
  */
  
  actions: {
    addAsync(context) {
      setTimeout(()=>{
        context.commit('add')
      },1000)
    },

    /**
     * 
     * @param {*} context 当前上下文
     * @param {*} step 外部传过来的参数
     */
    addNAsync(context,step) {
      setTimeout(()=>{
        context.commit('addN',step)
      },1000)
    },

    reducAsync(context) {
      setTimeout(()=>{
        context.commit('reduc')
      },1000)
    },

    /**
     * 
     * @param {*} context 当前上下文
     * @param {*} step 外部传过来的参数
     */
    reducNAsync(context,step) {
      setTimeout(()=>{
        context.commit('reducN',step)
      },1000)
    }
  },
  //不会修改state中的数据，起到包装数据作用类似于VUE 的计算属性
  getters:{
    showNum(state)
    {
        return "当前最新的数据为【"+ state.count +"】" 
    }
  },
  modules: {}
})
